<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="html_marry">
      <div class="top_out">
        <p class="p_left">
          <!-- <img @click="back" src="./img/1.png" alt="" /> -->
          <span @click="goWei" class="iconfont icon-lt"></span>
        </p>
        <div class="p_rigth">
          <!-- <span class="iconfont icon-weixinxiaochengxu"></span> -->
          <!-- <img src="./img/4.png" alt="" />
          <span class="iconfont icon-sandian"></span>
          <p style="color: white">|</p>
          <span class="iconfont icon-dotcircleo"></span> -->
        </div>
      </div>
      <div class="img_horned">
        <Touxiang @chuantouxiang="chuantouxiang" v-show="$route.query.tou" />
        <div id="divs"  v-show="$route.query.tou">
          <img :src="this.imgSrcs" alt="">
        </div>
        <button  v-show="$route.query.tou" @click="gopicture">上传头像</button>
        <!-- <Picture v-show="$route.query.tou"/> -->
        <Picture @flas="flas" v-if="fla"/>
        <div v-show="!$route.query.tou">
          <img
          class="right_dian"
          src="../../../../static/img/图片 2@1x (1).png"
          alt=""
          
        />
        </div>
        <p style="font-size: 16px; font-weight: 600; margin-top: 25px">
          宝 贝 信 息
        </p>
        <p style="font-size: 14px; font-weight: 500; margin: 10px">
          信息仅用于故事匹配，请放心填写
        </p>
      </div>
      <div class="name_input">
        <!-- <img class="img_lian" src="./img/2.png" alt="" /> -->
        <span class="iconfont icon-icon_xiaohai img_lian"></span>
        <input
          class="bao_input"
          type="text"
          v-model="name"
          placeholder="宝贝姓名"
          @input="nameWord"
        />
      </div>
      <div class="name_input">
        <!-- <img class="img_lian" src="./img/2.png" alt="" /> -->
        <span class="iconfont icon-23_nan img_lian"></span>
        <input
          class="bao_input"
          type="text"
          @input="sex"
          :placeholder="
            this.$route.query.code ? (mans == 1 ? '男' : mans == 0?'女':'宝贝性别') : '宝贝性别'
          "
          ref="text"
        />
        
        <span
          @click="boy"
          class="img_lian iconfont icon-nan"
          :id="mans == 1 ? 'man' : ''"
        ></span>
        <span
          @click="girl"
          class="img_lian iconfont icon-nv"
          :id="mans == 0 ? 'woman' : ''"
        ></span>
      </div>
      <div class="name_input">
        <!-- <img class="img_lian" src="./img/3.png" alt="" /> -->
        <span class="iconfont icon-xiazai1 img_lian"></span>
        <input
          class="bao_input"
          type="text"
          v-model="age"
          placeholder="宝贝年龄"
        />
      </div>
      <div class="interest">
        <p style="font-size: 16px; font-weight: 600; margin-top: 20px">
          兴趣内容
        </p>
        <p style="font-size: 14px; font-weight: 500; margin: 10px">
          可多选，最多选择3个
        </p>
      </div>
      <div class="data_flex">
        <p
          :class="
            classIndex[0] === index ||
            classIndex[1] === index ||
            classIndex[2] === index
              ? 'list_p dian_it'
              : 'list_p'
          "
          @click="select(index)"
          v-for="(item, index) in dataList"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <div class="ok_p" @click="butt">完成</div>
    </div>
  </div>
</template>
<script>
import * as apis from "../../api/home";
import Touxiang from "./touxiang";
import Picture from './picture'
import sensitiveWord from '../../js/sensitiveWord'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      dataList: [
        "成长陪伴",
        "心理辅导",
        "防疫抗疫",
        "习惯培养",
        "唐诗三百首",
        "睡前故事",
      ],
      classIndex: [],
      mans: this.$route.query.code ? this.$route.query.phone.userSex : "3",
      name: this.$route.query.code ? this.$route.query.phone.userName : "",
      gender: "",
      age: this.$route.query.code ? this.$route.query.phone.userAge : "",
      falg: false,
      userData: "",
      userItem: {},
      imgUrl: "",
      imgSrcs: "",
      fla:false
    };
  },
  components: {
    Touxiang,
    Picture
  },
  created() {},
  mounted() {
    // this.imgSrcs = this.$route.query.phto;
    // console.log(this.$route.query.phto);
    apis.userData().then((response) => {
      this.userData = response;
    });
    console.log(this.$route.query.code);
  },
  methods: {
    gopicture() {
      this.fla = true
    },
    chuantouxiang(res) {
      //{data: this.data, msg: this.msg}
      console.log("接收到的子组件的参数", res);
      this.imgUrl = res;
      console.log(155555454545454, this.imgUrl);
      //   this.dataList = res;
    },

    goWei(){
this.$router.push({
        name: "weiTan",
      });
    },
    back() {
      this.$router.push({
        name: "home",
      });
    },
    flas(res){
      this.fla = res.open
      this.imgSrcs = res.photo

      console.log(77,this.imgSrcs);
    },
    butt() {
        if(localStorage.getItem("src")=="1"){
          var srcPaths=this.imgUrl
        }else{
          var srcPaths=this.imgSrcs
        }
        console.log(srcPaths);
      let interest = [];
      interest.push(
        this.dataList[this.classIndex[0]],
        this.dataList[this.classIndex[1]],
        this.dataList[this.classIndex[2]]
      );
      let xing = interest.join(",");
      let phone = this.$route.query.phone.phone;
      let phones = this.$route.query.phone;
      console.log(phones);
      apis
        .interceptsed({
          ming: this.name,
          xing: this.mans,
          nian: this.age,
          phones: phone,
          phon: phones,
          xings: xing,
          // imgUrl: this.imgUrl,     //本地获取   
          // imgSrcs: this.imgSrcs,   //照相机
          srcPath:srcPaths,    
        })
        .then((response) => {
          let url = response.data.url;
          let code = response.data.code;
          let tian = response.data.tian;
          if (url) {
            console.log(response.data.play);
            const token = response.data.play;
            localStorage.setItem("userToken", token);
            this.$router.push({
              name: url,
            });
            this.$store.dispatch("order/addCount", {
              title: phone,
              name: this.name,
              img: this.userItem.userImg,
            });
            console.log("这是做什莫", this.userItem.userImg);
          }
          // if (code) {
          //   alert(code);
          // }
          if (tian) {
            alert(tian);
            this.$router.push({
              name: url,
            });
            this.$store.dispatch("order/addCount", {
              title: phones,
              name: this.name,
              img: srcPaths,
            });
            console.log("这是做什莫222", this.userItem.userImg);
            console.log(this.$store.state.order.phonne);
          }
        });
      this.userData.data.code.map((item, index) => {
        // console.log(this.name,item.userName,item.userName === this.name);
        if (item.userName === this.name) {
          console.log("当前姓名", item);
          console.log("当前信息", item.userName);
          this.userItem = item;
          return item;
        }
      });
      // api
      //   .basePicture({
      //     ming: this.name,
      //     xing: this.mans,
      //     nian: this.age,
      //     phones: phone,
      //     phon: phones,
      //     xings: xing,
      //     imgSrcs: this.imgSrcs,
      //   })
      //   .then((res) => {
      //     console.log(res);
      //   });
    },

    select(i) {
      let index = this.classIndex.findIndex((cur, index) => {
        return cur === i;
      });
      console.log(i);
      console.log(index);
      if (index > -1) {
        // console.log(index)
        this.classIndex.splice(index, 1);
      } else {
        if (this.classIndex.length < 3) {
          this.classIndex.push(i);
        } else {
          // alert("最多可以选择三个兴趣内容,可以试着点击你选择的内容来取消");
        }
      }
    },
    sex() {
      if (this.$refs.text.value === "男") {
        this.mans = 1;
      }
      if (this.$refs.text.value === "女") {
        this.mans = 0;
      }
    },
    boy() {
      this.$refs.text.value = "男";
      this.mans = 1;
    },
    girl() {
      this.$refs.text.value = "女";
      this.mans = 0;
      // this.mans = 0;
    },
    nameWord() {
      sensitiveWord.forEach((item, index) => {
        if (this.name.indexOf(item) !== -1) {
            this.name=this.name.replace(`${item}`,"*")
        }
      });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../assets/font/iconfont.css");
.html_marry {
  width: 414px;
  height: 736px;
  background: #f5c92c;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}
#divs {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid;
  overflow: hidden;
  top: 66px;
  left: 155px;
  position: absolute;
  z-index: -22;
}
#divs img{
width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
}
.top_out {
  width: 380px;
  height: 45px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.p_left span {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: rgba(255, 255, 255, 100);
}
.p_rigth {
  width: 87px;
  height: 32px;
  border-radius: 20px;
  /* border: 1px solid white; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.p_rigth span {
  font-size: 32px;
  display: inline-block;
  /* border: 1px solid white; */
  border-radius: 20px;
  /* background: white; */
  margin-top: 6px;
}
.bao_input::-webkit-input-placeholder {
  color: rgb(214, 210, 210);
}
#man {
  color: rgb(50, 228, 34);
}
#woman {
  color: rgb(111, 226, 17);
}
.img_horned {
  width: 100vw;
  text-align: center;
  color: aliceblue;
}
.right_dian {
  margin: 21px 0 0 50px;
  animation: mymove 700ms;
}
@keyframes mymove {
  0% {
    transform: scale(0.9) rotate(-5deg);
  }
  15% {
    transform: scale(1) rotate(5deg);
  }
  30% {
    transform: scale(1.1) rotate(-5deg);
  }
  45% {
    transform: scale(1.1) rotate(5deg);
  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
  90% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1.1) rotate(5deg);
  }
}
.name_input {
  width: 350px;
  height: 40px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin: 0 auto 15px;
}
.img_lian {
  margin-left: 10px;
  background: white;
  color: rgb(199, 199, 199);
}
/* .yi{

} */
.bao_input {
  margin-left: 20px;
  border: none;
  color: rgb(214, 210, 210);
  font-size: 16px;
  outline: none;
  width: 210px;
}
.interest {
  text-align: center;
  color: white;
}
.data_flex {
  width: 350px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}
.list_p {
  width: 104px;
  height: 40px;
  background: white;
  color: rgb(214, 210, 210);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  letter-spacing: 2px;
}
.ok_p {
  width: 350px;
  height: 40px;
  background: #ff006e;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 40px;
}
.dian_it {
  background: #0aceb0;
  font-weight: 700;
  letter-spacing: 3px;
  color: white;
}
.hus {
  background: #0aceb0;
}
</style>